<template>
  <div class="baqsj-home">
    <div class="content">
      <div class="grid-box flex-auto fl">
        <div
          v-for="(item, index) in flowList"
          :key="index"
          class="grid-item bg-white"
          :class="currentTips == item.id ? 'hover' : ''"
          @click="showProcessSelect(item)"
          @mouseover="showTipsFun(item.id)"
        >
          <img :src="item.icon" class="mr20">
          <div>
            <div class="title mb10">{{ item.name }}</div>
            <div class="des line-height-20">{{ item.subtitle1 }}</div>
            <div class="des">{{ item.subtitle2 }}</div>
          </div>
        </div>
      </div>
      <div class="font18 tips width300 fl">
        <div class="clearfix flex flex-row align-center height70">
          <div class="line" style="background:#277fd6;" />
          <span
            class="font20 ml10 flex-auto"
            style="color:#277fd6;"
          >请选择不安全事件</span>
        </div>
        <div>
          <div
            v-for="(item, index) in currentList"
            :key="index"
            class="tip-item"
          >
            <div class="label font17 color-purple fw600">{{ item.title }}</div>
            <div class="des font15 mt8 line-height-22">{{ item.desc }}</div>
          </div>
          <el-divider />
          <div class="tip-item">
            <div class="label font17 color-purple fw600">流转方向</div>
            <div class="des font15 mt8 line-height-22">{{ currentFlow }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="processTitle"
      :visible.sync="centerDialogVisible"
      width="500px"
      center
    >
      <div class="baqsj-flow">
        <el-radio-group v-model="currentProcessId" size="large">
          <el-radio
            v-for="(item, index) in currentRadioOp"
            :key="index"
            :label="item.processId"
            border
            class="cushing-radio cushing-mini"
          >{{ item.title }}</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="mr30"
          @click="centerDialogVisible = false"
        >取 消</el-button>
        <el-button
          type="primary"
          style="background: #277fd6;"
          @click="submitWorkOrder"
        >确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'ApplyHome',
  components: {},
  data() {
    return {
      centerDialogVisible: false,
      processTitle: '',
      showTips: false,
      currentProcessId: '',
      currentTips: 1,
      currentFlow: '',
      currentList: [],
      flowList: [
        {
          id: 1,
          name: '诊疗相关',
          subtitle1:
              '医疗处置事件；报告、标本差错事件;饮食差错事件；输液反应事件;其他不良事件',
          subtitle2: '',
          children: [
            {
              title: '医疗处置事件',
              desc:
                  '患者身份识别或诊疗部位错误、误诊、漏诊、错误治疗、技术操作失误等',
              processId: 17
            },
            {
              title: '报告、标本差错事件',
              desc: '各类原因引起的检验检查报告错误、标本丢失',
              processId: 18
            },

            {
              title: '饮食差错事件',
              desc: '各类原因引起的患者饮食差错',
              processId: 19
            },
            {
              title: '输液反应事件',
              desc: '各类原因引起的输液事件（不适用于门诊患者）',
              processId: 20
            },
            {
              title: '其他不良事件',
              desc: '各类原因引起的其他不良事件',
              processId: 21
            }
          ],
          flow: '上报-医务处-医务处/护理部/质控办',
          icon: require('@/assets/baqsj/zlxg.png'),
          process_key: '1',
          mid: 'baqsj'
        },

        {
          id: 2,
          name: '药物相关',
          subtitle1: '药物不良反应事件；给药错误事件',
          subtitle2: '',
          children: [
            {
              title: '药物不良反应事件',
              desc: '用药后发生可疑药物不良反应事件',
              processId: 23
            },
            {
              title: '给药错误事件',
              desc: '因医嘱、处方、调剂、给药等不当引起各类用药错误事件',
              processId: 24
            }
          ],
          flow:
              '不良反应事件上报-药剂科（预留科研用药不良反应报告）;给药错误上报-医务处-医务处/药剂科/护理部',
          icon: require('@/assets/baqsj/ywxg.png'),
          process_key: '2',
          mid: 'baqsj'
        },

        {
          id: 3,
          name: '医疗器械相关',
          subtitle1: '医疗器械事件',
          subtitle2: '',
          children: [
            {
              title: '医疗器械事件',
              desc: '各类因医疗设备缺陷、故障等引起的不良事件',
              processId: 22
            }
          ],
          flow: '上报-医务处-装备科',
          icon: require('@/assets/baqsj/ylqx.png'),
          process_key: '3',
          mid: 'baqsj'
        },
        {
          id: 4,
          name: '医患沟通相关',
          subtitle1: '医患沟通（纠纷）事件',
          subtitle2: '',
          children: [
            {
              title: '医患沟通（纠纷）事件',
              desc:
                  '医患沟通不良、医患语言冲突、医患行为冲突、患者在其他医院已经存在医疗纠纷；患者因社会问题延长住院等。',
              processId: 25
            }
          ],
          flow: '上报-医务科',
          icon: require('@/assets/baqsj/yhgt.png'),
          process_key: '4',
          mid: 'baqsj'
        },
        {
          id: 5,
          name: '输血相关',
          subtitle1: '用血错误事件；输血反应事件',
          subtitle2: '',
          children: [
            {
              title: '用血错误事件',
              desc:
                  '因用血医嘱开具、备血、传送及输血过程中发生错误引起的各类用血错误事件',
              processId: 26
            },
            {
              title: '输血反应事件',
              desc: '输血后发生输血反应事件',
              processId: 27
            }
          ],
          flow: '上报-医务处-输血科/护理部/医务处-上报人',
          icon: require('@/assets/baqsj/sxxg.png'),
          process_key: '5',
          mid: 'baqsj'
        },
        {
          id: 6,
          name: '护理相关',
          subtitle1: '主要发生在病房，在护理时发生的不良事件',
          subtitle2: '',
          children: [
            {
              title: '护理相关',
              desc: '主要发生在病房，在护理时发生的不良事件'
            }
          ],
          flow: '上报-医务处',
          icon: require('@/assets/baqsj/hl.png'),
          process_key: '6',
          mid: 'baqsj'
        },
        {
          id: 7,
          name: '院感相关',
          subtitle1: '院内感染不良事件',
          subtitle2: '',
          tag: '(仅内网)',
          children: [
            {
              title: '院内感染不良事件',
              desc: '病区内发生的可疑、特殊院内感染事件',
              processId: 28
            }
          ],
          flow: '上报-医务处-院感科',
          icon: require('@/assets/baqsj/ygxg.png'),
          process_key: '7',
          mid: 'baqsj'
        },
        {
          id: 8,
          name: '手术相关',
          subtitle1: '手术不良事件；操作不良事件；非计划再次手术事件',
          subtitle2: '',
          children: [
            {
              title: '手术不良事件',
              desc:
                  '手术部位、术式选择错误；患者术中死亡、术中术后出现患者及家属不理解的并发症；手术器械遗留在体内等；',
              processId: 29
            },
            {
              title: '操作不良事件',
              desc:
                  '手术操作不良事件',
              processId: 30
            },
            {
              title: '非计划再次手术事件',
              desc:
                  '原手术的直接或间接并发症所导致的非预期二次或再次手术（不包括正常的分期手术）',
              processId: 31
            }
          ],
          flow: '上报-医务处-医务处/护理部-上报人',
          icon: require('@/assets/baqsj/ssxg.png'),
          process_key: '8',
          mid: 'baqsj'
        },
        {
          id: 9,
          name: '防保相关',
          subtitle1: '职业暴露不良事件',
          subtitle2: '',
          children: [
            {
              title: '职业暴露不良事件',
              desc: '医务人员在医疗过程中发生职业暴露伤害事件（如针刺伤、血液体液飞溅入粘膜器官等）',
              processId: 32
            }
          ],
          flow: '上报-医务处-防保科',
          icon: require('@/assets/baqsj/fbxg.png'),
          process_key: '9',
          mid: 'baqsj'
        },
        {
          id: 10,
          name: '意外事件',
          subtitle1: '跌倒、坠床事件；出走事件；冲动伤人事件；噎食事件；自杀、自伤事件；其他意外事件',
          subtitle2: '',
          children: [
            {
              title: '跌倒、坠床事件',
              desc: '因意外跌至地面或其他平面导致的伤害事件',
              processId: 33
            },
            {
              title: '出走事件',
              desc: '各类原因引起的出走事件',
              processId: 34
            },
            {
              title: '冲动伤人事件',
              desc: '冲动伤人事件',
              processId: 35
            },
            {
              title: '噎食事件',
              desc: '噎食事件',
              processId: 36
            },
            {
              title: '自杀、自伤事件',
              desc: '自杀、自伤事件',
              processId: 37
            },
            {
              title: '其他意外事件',
              desc: '患者意外拔管、烧烫伤等',
              processId: 38
            }
          ],
          flow: '上报-医务处-医务处/护理部/保卫处/质控办',
          icon: require('@/assets/baqsj/ywsj.png'),
          process_key: '10',
          mid: 'baqsj'
        },
        {
          id: 11,
          name: '其他不良事件上报',
          subtitle1: '公共事件；治安事件；其他事件',
          subtitle2: '',
          children: [
            {
              title: '公共事件',
              desc: '停电、停水、漏水、火警、物业管理、大面积网络瘫痪等',
              processId: 39
            },
            {
              title: '治安事件',
              desc: '酗酒打闹、偷窃等治安问题',
              processId: 40
            },
            { title: '其他事件', desc: '其他事件', processId: 41 }
          ],
          flow: '上报-后勤保障部门/保卫科/医务科',
          icon: require('@/assets/baqsj/qt.png'),
          process_key: '11',
          mid: 'baqsj'
        }
      ],
      currentRadioOp: []
    }
  },
  computed: {},
  created() {
    this.currentList = this.flowList[0].children
  },
  methods: {
    showTipsFun(type) {
      this.currentTips = type
      this.currentList = this.flowList[type - 1].children
      this.currentFlow = this.flowList[type - 1].flow
    },
    showProcessSelect(item) {
      if (item.name == '护理相关') {
        this.$message({
          type: 'error',
          message: '建设中，暂未开放！'
        })
      } else if (item.children.length == 1) {
        this.$router.push({
          path: '/baqsj/create-report',
          query: { processId: item.children[0].processId }
        })
      } else {
        this.processTitle = item.name
        this.centerDialogVisible = true
        this.currentRadioOp = item.children
        this.currentProcessId = item.children[0].processId
      }
    },
    submitWorkOrder() {
      // if (this.currentProcessId == 12) {
      //   this.$message({
      //     type: "error",
      //     message: "建设中，暂未开放！"
      //   })
      //   return
      // }
      this.centerDialogVisible = false
      this.$router.push({
        path: '/baqsj/create-report',
        query: { processId: this.currentProcessId }
      })
    }
  }
}
</script>
  <style lang="scss" scoped>
  .baqsj-home {
    width: 100%;
    height: calc(100vh - 50px);
    padding: 20px 20px 20px 20px;
    margin: 0 auto;

    .header {
      margin-bottom: 30px;
    }

    .content {
      height: calc(100vh - 50px);

      .tip-item {
        margin-bottom: 15px;
      }
    }

    .bg-purple {
      background: #ea7f35;
    }

    .bg-white {
      background: #fff;
    }

    .grid-box {
      width: calc(100% - 300px);
      display: flex;
      flex-wrap: wrap;

      .grid-item {
        border-radius: 4px;
        width: calc(33% - 15px);
        display: flex;
        flex-direction: row;
        color: #111;
        transition: 0.2s all ease;
        -webkit-box-shadow: 0 15px 30px 0 rgb(0 0 0 / 20%);
        box-shadow: 0 15px 30px 0 rgb(0 0 0 / 20%);
        max-height: 250px;
        min-height: 130px;
        padding: 20px 10px 10px 10px;
        margin-right: 15px;
        margin-bottom: 15px;
        border-radius: 16px;
        border: 2px solid #ffffff;

        img {
          width: 60px;
          height: 60px;
        }

        .title {
          font-size: 18px;
        }

        &:hover {
          // top: -3px;
          // right: -1px;
          -webkit-box-shadow: 0 15px 30px 0 rgb(0 0 0 / 50%);
          box-shadow: 0 15px 30px 0 rgb(0 0 0 / 50%);
          cursor: pointer;
          box-sizing: border-box;
        }

        .des {
          font-size: 15px;
          margin-top: 5px;
          color: #606260;
        }
      }

      .hover {
        // top: -3px;
        // right: -1px;
        -webkit-box-shadow: 0 10px 25px 0 rgb(0 0 0 / 50%) !important;
        box-shadow: 0 10px 25px 0 rgb(0 0 0 / 50%) !important;
        border: 2px solid #277fd6;
        cursor: pointer;
        box-sizing: border-box;
      }
    }

    .color-purple {
      color: #333333;
    }

    .line {
      height: 22px;
      width: 5px;
      background: #277fd6;
    }

    .tips {
      padding: 0px 15px;
      background: #f3f7ff;
      border-radius: 10px;
      /*border: 2px solid rgba(234, 127, 53, 0.3);
      -webkit-box-shadow: 0 5px 5px 0 rgb(0 0 0 / 10%);
      box-shadow: 0 5px 5px 0 rgb(0 0 0 / 10%);*/
    }
  }
  </style>
